---
title: Set up Storybook for Vue and Nuxt Projects
description: This guide explains how to set up Storybook for Vue and Nuxt projects in your Nx workspace.
sidebar:
  label: Set up Storybook for Vue Projects
filter: 'type:Guides'
---

This guide will walk you through setting up [Storybook](https://storybook.js.org) for Vue and Nuxt projects in your Nx workspace.

{% aside type="caution" title="Set up Storybook in your workspace" %}
You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/docs/technologies/test-tools/storybook/introduction) to get started.
{% /aside %}

## Generate Storybook Configuration for a Vue or Nuxt project

You can generate Storybook configuration for an individual Vue or Nuxt project by using the [`@nx/vue:storybook-configuration` generator](/docs/technologies/vue/generators#storybook-configuration), like this:

{% tabs %}
{% tabitem label="Vue" %}

```shell
nx g @nx/vue:storybook-configuration project-name
```

{% /tabitem %}
{% tabitem label="Nuxt" %}

```shell
nx g @nx/nuxt:storybook-configuration my-nuxt-app
```

{% /tabitem %}

{% /tabs %}

## Auto-generate Stories

The [`@nx/vue:storybook-configuration` generator](/docs/technologies/vue/generators#storybook-configuration) has the option to automatically generate `*.stories.ts` files for each component declared in the library.

```text {% frame="none" %}
<some-folder>/
├── MyComponent.vue
└── MyComponent.stories.ts
```

If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/vue:stories` generator](/docs/technologies/vue/generators#stories):

{% tabs %}
{% tabitem label="Vue" %}

```shell
nx g @nx/vue:stories --project=<project-name>
```

{% /tabitem %}
{% tabitem label="Nuxt" %}

```shell
nx g @nx/nuxt:stories --project=<project-name>
```

{% /tabitem %}

{% /tabs %}

### Example library

Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui`. This library contains a component, called `my-button`.

The command to generate stories for that library would be:

```shell
nx g @nx/vue:stories --project=feature-ui
```

and the result would be the following:

{% filetree %}

- workspace name/
  - apps/
  - libs/
    - feature/
      - ui/
        - .storybook/
      - src/
        - lib/
          - my-button/
            - MyButton.vue
            - MyButton.stories.ts
            - etc...
        - etc...
      - README.md
      - tsconfig.json
      - etc...
    - etc...
  - nx.json
  - package.json
  - README.md
  - etc...

{% /filetree %}

## More Documentation

You can find all Storybook-related Nx topics [here](/docs/technologies/test-tools/storybook/introduction).

For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/vue/get-started/introduction).
